<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model='input'>
        {{input}}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 1.过滤器可以给数据显示进行添油加醋
    // 需求：原本显示的数据是 abc  过滤后   cba
    // 需求实现：1.用input+model 来获取数据到vue中
    //  2.输出：{{内容||使用过滤器输出}}

    var App={
        template:`<div>
            <input type='text' v-model='n1'/>
            +
            <input type='text' v-model='n2'/>
            *
            <input type='text' v-model='n3'/>
            ={{res}}
        </div>`,
        data(){
            return{
                n1:0,
                n2:'',
                n3:'',
            }
        },
        computed:{
            // 只要this 的某一个值有变化，就会触发
            res(){
                return parseInt(this.n1)+parseInt(this.n2)*parseInt(this.n3)
            }
        }
    }
    
    let vue = new Vue({
        el:'#app',
        template:'<app/>',
        components:{
            app:App
        }
    })


</script>
</html>